<template>
	<el-row :gutter="20" class="main-box">
	    <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16" class="left-box">
			<div style="height: 100%;" id="dataAnalysisLine" v-if="isShowEcharts">
			</div>
		</el-col>
	    
		
		
		<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8" class="right-box">
			<el-card class="box-card">
				<div style="text-align: center;font-weight: 500;border-bottom: #e6e6e6 0.0625rem solid;line-height: 40px;">
					数据分析操作
				</div>
				
				<el-row style="border-bottom: 0.0625rem #e6e6e6 solid;">
				    <el-col :span="24" style="height: 9.375rem;">
						<div style="height: 50px;line-height: 20px;font-size:0.9375rem;">
							官方提供接口
						
							<el-dropdown 
							style="height: 1.875rem;
							line-height: 1.875rem;
							color: #606266;
							border-radius: 4px;
							border: 0.0625rem #e6e6e6 solid;
							margin-top: 0.625rem;margin-left: 20px;">
								<span class="el-dropdown-link">
								  下拉选择操作
								  <el-icon class="el-icon--right">
									<arrow-down />
								  </el-icon>
								</span>
								<template #dropdown>
								  <el-dropdown-menu>
									<el-dropdown-item @click="changeAny(1)">季度时间</el-dropdown-item>
									<el-dropdown-item @click="changeAny(2)">温度变化</el-dropdown-item>
									<el-dropdown-item @click="changeAny(3)">天气情况</el-dropdown-item>
								  </el-dropdown-menu>
								</template>
							</el-dropdown>
						</div>
						<div style="font-size:0.3125rem;color: #606266;;">
							备注提示：<br>
							分析日数据需要记录当日具体时间，如果未按要求数据采集将不准确。温度和天气情况为内部获取。<br>
							数据仅供参考使用，图标过大不建议使用手机观看
						</div>
					</el-col>
				</el-row>
				  
				<el-row style="border-bottom: 0.0625rem #e6e6e6 solid;">
				    <el-col :span="24" style="height: 12.375rem;">
						<div style="height: 50px;line-height: 20px;font-size:0.9375rem;">
							自定义接口						
							<el-dropdown 
							style="height: 1.875rem;
							line-height: 1.875rem;
							color: #606266;
							border-radius: 4px;
							border: 0.0625rem #e6e6e6 solid;
							margin-top: 0.625rem;">
								<span class="el-dropdown-link">
								  下拉选择操作
								  <el-icon class="el-icon--right">
									<arrow-down />
								  </el-icon>
								</span>
								<template #dropdown>
								  <el-dropdown-menu>
									<el-dropdown-item @click="changeAny(4)">1-2-3-4</el-dropdown-item>
								  </el-dropdown-menu>
								</template>								
							</el-dropdown>
							<el-popconfirm title="你确定要清除么,一旦清除无法恢复" 
							style="margin-left: 0.125rem;width:3.75rem;font-size: 10px;">
							    <template #reference>
							      <el-button type="danger" @click="clear()">清除加权</el-button>
							    </template>
							</el-popconfirm>
						</div>
						<div style="font-size:0.3125rem;color: #606266;">
							使用说明：<br>
							你可以根据自己需要，在录入信息时对某条数据进行加权。一条数据最多提供三个权值。以此获取相关数据情况。<br>
							例子：<br>
							比如我想了解冰激凌甜度影响，我可以将录入此条数据时权重赋值为1代表100%糖2代表70%糖
							以此选择1-2时即可得到相关数据情况。<br>
							备注：数据仅提供参考，分析情况跟客户加权数据有关。一旦清除加权将之前设置全部取消无法回退。				
						</div>
					</el-col>
				</el-row> 
				
				<el-row>
				    <el-col :span="24">
						<br>
						<div>
							基础结论：
							<h4 style="color: #606266;font-weight: 400px;">
								平均值：{{ average }}
							</h4>
						</div>
					</el-col>
				</el-row>
							
			</el-card>
		</el-col>
	  
	</el-row>
</template>

<script lang="ts" setup> 
	import { ArrowDown } from '@element-plus/icons-vue'
	import * as echarts from 'echarts'
	import { ref,onMounted,onUnmounted } from 'vue'
	import { getAnalysis } from "../../http/analysis.js"
	import { ElMessageBox,ElMessage } from 'element-plus'
	// Echart
	let dataAnalysisLine
	const change = ref(1) 
	const average = ref("")
	
	const changeAny = (data) =>{
		change.value = data
		drawEchart()
	}
	const clear=()=>{
		ElMessage.warning("暂时不能使用")
	}
	
	
	const drawEchart =()=>{
		getAnalysis(change.value).then(res=>{
			average.value = res.data.average
			setTimeout(function () {
			  const option = {
			    legend: {},
			    tooltip: {
			      trigger: 'axis',
			      showContent: true
			    },
			    dataset: {
			      source:res.data.dataset
			    },
			    xAxis: { type: 'category' },
			    yAxis: { 
					gridIndex: 0,
					scale:true ,
					show:true,
				},
			    grid: {
			    	left:0,
			    	right: '2%',
			    	top:'50%',
			    	bottom:0,
			    	containLabel: true
			    },
			    series:res.data.series
			  };
			  dataAnalysisLine.on('updateAxisPointer', function (event) {
			    const xAxisInfo = event.axesInfo[0];
			    if (xAxisInfo) {
			      const dimension = xAxisInfo.value + 1;
			      dataAnalysisLine.setOption({
			        series: {
			          id: 'pie',
			          label: {
			            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
			          },
			          encode: {
			            value: dimension,
			            tooltip: dimension
			          }
			        }
			      });
			    }
			  });
			  dataAnalysisLine.setOption(option,true);
			});	
		})			
	}
	// 扇形统计图
	onMounted(() =>{
		dataAnalysisLine = echarts.init(document.getElementById("dataAnalysisLine"));
		// 绘制图表
		drawEchart()	
		window.onresize = function () {//自适应大小
			dataAnalysisLine.resize();
		};
	})
	let isShowEcharts = ref(true)
	onUnmounted(() =>{
		isShowEcharts.value=false
	})
</script>

<style scoped="scoped">
	.left-box{
		height: 100%;
	}
	.right-box{
		height: 100%;		
	}
	.main-box{
		height: 100%;
	}
	.box-card {
	 height: 100%;
	}
</style>
